<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>VOCAB EDITOR</title>
		<script src="static/js/lib/jquery/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/lib/jquery/jquery.jspath.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/lib/jquery/jquery.objtree.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/lib/json2.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/lib/Math.uuid.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/lib/raphael.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="static/js/lib/jquery/tooltip/jquery.tooltip.css" type="text/css" media="screen" />
		<script src="static/js/lib/jquery/tooltip/jquery.tooltip.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="static/js/lib/jquery/colopicker/colorPicker.css" type="text/css" media="screen" />
		<script src="static/js/lib/jquery/colopicker/jquery.colorPicker.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="static/js/lib/jquery/jqmodal/jqModal.css" type="text/css" media="screen" />
		<script src="static/js/lib/jquery/jqmodal/jqModal.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="static/css/vocab.css" type="text/css" media="screen" />
		<script src="static/js/snippets.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/vocab.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="holder"></div>
		<div id="status-up">
			<div id="status-up-left">
				<div id="status-up-logo" class="logo">VOCAB EDITOR</div>
				<div class="logo">&gt;</div>
				<div id="status-up-name" class="logo">New Vocab</div>
			</div>
			<div id="status-up-right">
				<div class="etiqueta">{{ user_text }}</div>
				<div class="boton"><a href="{{ url }}">{{ url_linktext }}</a></div>
				<div id="showAbout" class="boton">about</div>
			</div>
		</div>
		<div id="status-up-message" class="message" style="display:none">New message</div>
		<div id="panel-up">
			<div id="panel-up-left">
				<div class="boton" id="addClass">+ class</div>
				<div class="boton" id="addProperty">+ property</div>
				<div class="boton" id="addIndividual">+ individual</div>
			</div>
			<div id="panel-up-right">
				<div class="boton" id="export">rdf</div>
				<div class="boton botonDisabled" id="showHistory">rev</div>
				<div class="boton" id="showNamespaces">ns</div>
				<div class="etiqueta"> | </div>
				<div class="boton file fileNew" id="new">&nbsp;new&nbsp;</div>
				<div class="boton" id="showSave">&nbsp;save&nbsp;</div>
				<div class="boton" id="showBrowse">open&nbsp;</div>
			</div>
		</div>
		<div id="options">
			<div class="close closeOptions">close</div>
			<div id="detailHistory" class="detail" style="overflow:auto;height:294px;"></div>
			<div id="detailBrowse" class="detail" style="overflow:auto;height:294px;"></div>
			<div id="detailClass" class="detail" style="display:none">
				<table summary="layout table">
					<tr>
						<td colspan="4"><strong>Class Detail</strong></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="2">namespace</td>
						<td colspan="2">color</td>
					</tr>
					<tr>
						<td colspan="2" id="tdClassNamespace">
							<select id="classNamespace">
								<option value="0"></option>
							</select>
						</td>
						<td colspan="2" id="tdClassColor"><input type="text" id="classColor" size="10" /></td>
					</tr>
					<tr>
						<td colspan="4">name</td>
					</tr>
					<tr>
						<td colspan="4"><input type="text" id="className" size="40" style="width:260px" /></td>
					</tr>
					<tr>
						<td>x</td>
						<td>y</td>
						<td>width</td>
						<td>height</td>
					</tr>
					<tr>
						<td><input type="text" id="classPositionX" size="4" style="width:30px" /></td>
						<td><input type="text" id="classPositionY" size="4" style="width:30px" /></td>
						<td><input type="text" id="classDimensionWidth" size="4" style="width:30px" /></td>
						<td><input type="text" id="classDimensionHeight" size="4" style="width:30px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">uuid</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="classUuid" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
				</table>
				<br />
				<div id="updateClass" class="boton">Update Class</div>
				<div class="boton closeOptions">Close</div>
				<br />
			</div>
			<div id="detailIndividual" class="detail" style="display:none">
				<table summary="layout table">
					<tr>
						<td colspan="4"><strong>Individual Detail</strong></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="2">namespace</td>
						<td colspan="2">color</td>
					</tr>
					<tr>
						<td colspan="2" id="tdIndividualNamespace">
							<select id="individualNamespace">
								<option value="0"></option>
							</select>
						</td>
						<td colspan="2" id="tdIndividualColor"><input type="text" id="individualColor" size="10" /></td>
					</tr>
					<tr>
						<td colspan="4">name</td>
					</tr>
					<tr>
						<td colspan="4"><input type="text" id="individualName" size="40" style="width:260px" /></td>
					</tr>
					<tr>
						<td>x</td>
						<td>y</td>
						<td>width</td>
						<td>height</td>
					</tr>
					<tr>
						<td><input type="text" id="individualPositionX" size="4" style="width:30px" /></td>
						<td><input type="text" id="individualPositionY" size="4" style="width:30px" /></td>
						<td><input type="text" id="individualDimensionWidth" size="4" style="width:30px" /></td>
						<td><input type="text" id="individualDimensionHeight" size="4" style="width:30px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">uuid</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="individualUuid" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
				</table>
				<br />
				<div id="updateIndividual" class="boton">Update Individual</div>
				<div class="boton closeOptions">Close</div>
				<br />
			</div>
			<div id="detailProperty" class="detail" style="display:none">
				<table summary="layout table">
					<tr>
						<td colspan="4"><strong>Property Detail</strong></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="2">namespace</td>
						<td colspan="2">color</td>
					</tr>
					<tr>
						<td colspan="2" id="tdPropertyNamespace">
							<select id="propertyNamespace">
								<option value="0"></option>
							</select>
						</td>
						<td colspan="2" id="tdPropertyColor"><input type="text" id="propertyColor" size="10" /></td>
					</tr>
					<tr>
						<td colspan="4">name</td>
					</tr>
					<tr>
						<td colspan="4"><input type="text" id="propertyName" size="40" style="width:260px" /></td>
					</tr>
					<tr>
						<td>x</td>
						<td>y</td>
						<td>width</td>
						<td>height</td>
					</tr>
					<tr>
						<td><input type="text" id="propertyPositionX" size="4" style="width:30px" /></td>
						<td><input type="text" id="propertyPositionY" size="4" style="width:30px" /></td>
						<td><input type="text" id="propertyDimensionWidth" size="4" style="width:30px" /></td>
						<td><input type="text" id="propertyDimensionHeight" size="4" style="width:30px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">uuid</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="propertyUuid" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">domain</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="propertyDomain" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">range</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="propertyRange" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
				</table>
				<br />
				<div id="updateProperty" class="boton">Update Property</div>
				<div class="boton closeOptions">Close</div>
				<br />
			</div>
			<div id="detailConnection" class="detail" style="display:none">
				<table summary="layout table">
					<tr>
						<td colspan="4"><strong>Connection Detail</strong></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="4">uuid</td>
					</tr>
					<tr>
						<td colspan="4"><input type="text" id="connectionUuid" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">from</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="connectionFrom" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">to</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="connectionTo" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="4">shapes</td>
					</tr>
					<tr class="debug">
						<td colspan="4"><input type="text" id="connectionShapes" size="10" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr>
						<td colspan="4">Type</td>
					</tr>
					<tr>
						<td colspan="4"><input type="text" id="connectionType" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
				</table>
				<br />
				<div id="deleteConnection" class="boton">Delete Connection</div>
				<div class="boton closeOptions">Close</div>
				<br />
			</div>
			<div id="detailNamespaces" class="detail" style="display:none;overflow:auto;height:294px;">
				<table summary="layout table">
					<tr>
						<td colspan="4"><strong>Namespaces</strong></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="4" class="destaca">default</td>
					</tr>
					<tr>
						<td>color</td>
						<td id="tdNsDefaultColor"><input type="text" id="nsDefaultColor" size="10" /></td>
						<td>prefix</td>
						<td><input type="text" id="nsDefaultPrefix" size="10" style="width:50px" /></td>
					</tr>
					<tr>
						<td colspan="4">uri&nbsp;<input type="text" id="nsDefaultUri" size="30" style="width:235px" /></td>
					</tr>
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
				</table>
				<table id="listNamespaces" summary="layout table">
				</table>
				<table summary="layout table">
					<tr>
						<td colspan="4" class="destaca">new</td>
					</tr>
					<tr>
						<td>color</td>
						<td id="tdNsNewColor"><input type="text" id="nsNewColor" size="10" /></td>
						<td>prefix</td>
						<td><input type="text" id="nsNewPrefix" size="10" style="width:50px" /></td>
					</tr>
					<tr>
						<td colspan="4">uri&nbsp;<input type="text" id="nsNewUri" size="30" style="width:235px" /></td>
					</tr>
				</table>
				<br />
				<div id="updateNamespaces" class="boton">Update Namespaces</div>
				<div class="boton closeOptions">Close</div>
				<br />
				<br />
				<br />
			</div>
			<div id="detailSave" class="detail" style="display:none;">
				<table summary="layout table">
					<tr>
						<td colspan="2"><strong>Save File</strong></td>
					</tr>
					<tr>
						<td colspan="2">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="2">name</td>
					</tr>
					<tr>
						<td colspan="2"><input type="text" id="fileName" size="40" style="width:260px" /></td>
					</tr>
					<tr class="debug">
						<td colspan="2">key</td>
					</tr>
					<tr class="debug">
						<td colspan="2"><input type="text" id="fileKey" size="40" disabled="disabled" style="width:260px" /></td>
					</tr>
					<tr>
						<td>&nbsp;<img src="/static/images/archived.gif" alt="" />&nbsp;&nbsp;archived</td>
						<td class="checkbox-cell"><input type="checkbox" id="fileArchived" /></td>
					</tr>
					<tr>
						<td>&nbsp;<img src="/static/images/locked.gif" alt="" />&nbsp;&nbsp;locked</td>
						<td class="checkbox-cell"><input type="checkbox" id="fileLocked" /></td>
					</tr>
					<tr>
						<td>&nbsp;<img src="/static/images/published.gif" alt="" />&nbsp;&nbsp;published</td>
						<td class="checkbox-cell"><input type="checkbox" id="filePublished" /></td>
					</tr>
				</table>
				<br />
				<div id="updateFile" class="boton">Save File</div>
				<div class="boton closeOptions">Close</div>
				<br />
			</div>
		</div>
		<div class="jqmWindow" id="dialogExport" style="display:none">
			<div class="close jqmClose">close</div>
			<strong>RDF/XML diagram serialization</strong><br />
			<br />
			<textarea id="exportContainer" rows="20" cols="80">
			</textarea>
			<br />
			<br />
			<div class="boton jqmClose">Close</div>
		</div>
		<div class="jqmWindow jqmWindowAbout" id="dialogAbout" style="display:none">
			<div class="close jqmClose">close</div>
			<strong>VOCAB EDITOR</strong><br />
			<br />
			<strong>RDF/OWL/SKOS vocabulary-diagram editor.</strong> <br />
			For more information please see <a href="http://code.google.com/p/tesis-e/source/browse/#svn/trunk/vocab-editor">source
			code repository</a> and <a href="http://tesis-e.blogspot.com">blog</a>.<br />
			<br />
			<small>
				Server-side python application on <a href="http://code.google.com/appengine/">google app engine</a>.<br />
				<br />
				Client-side javascript app using: <br />
				- frameworks: 
				<a href="http://raphaeljs.com" title="version 0.8.2">raphael</a>, 
				<a href="http://jquery.com" title="version 1.3.2">jquery</a> and 
				<a href="http://json.org/js" title="version 2">json</a>.<br />
				- plugins: 
				<a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" title="version: 1.3">jquery.tooltip</a>, 
				<a href="http://dev.iceburg.net/jquery/jqModal/" title="version: r14">jqModal</a>, 
				<a href="http://github.com/thatcher/jquery-jspath/tree/master" title="version: 1.0.rc0">jQuery.jsPath</a>, 
				<a href="http://github.com/thatcher/jquery-objtree/tree/master" title="version: 2009-05-02 on github">jQuery.ObjTree</a>, 
				<a href="http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/" title="version: 2009-02-07 on github">jquery.colorpicker</a> and 
				<a href="http://www.broofa.com/blog/2008/09/javascript-uuid-function/" title="version 1.3">math.uuid</a>.<br />
				- code snippets: 
				<a href="http://raphaeljs.com/graffle.html">connection</a>, 
				<a href="http://deepliquid.com/blog/archives/98">arrow</a>, 
				<a href="http://bloggingmath.wordpress.com/2009/05/29/line-segment-intersection/">intersection</a> and 
				<a href="http://en.wikipedia.org/wiki/Topological_sorting">topological sorting</a>.<br />
				<br />
				Colours on page and favicon use <a href="http://www.colourlovers.com/palette/845564/its_raining_love">its raining love</a> palette.<br />
				Icons from <a href="http://code.google.com/p/twotiny/">twotiny</a>.
			</small>
			<br />
			<br />
			<div class="boton jqmClose">Close</div>
		</div>
	</body>
</html>

